<ui:composition  xmlns="http://www.w3.org/1999/xhtml"
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:h="http://java.sun.com/jsf/html"
                 template="template.xhtml"
                 xmlns:c="http://java.sun.com/jsp/jstl/core"
                 xmlns:f="http://java.sun.com/jsf/core"
                 xmlns:ice="http://www.icesoft.com/icefaces/component"
                 xmlns:icecore="http://www.icefaces.org/icefaces/core">

    <ui:param name="title" value="Search"/>
    <ui:define name="content">
        <!-- Text Field input onsubmit="false" partialSubmit="false" submitted="false"-->
        <h:form>

            <!-- selectInputText showing panel grid list of items. -->
            <ice:panelGroup styleClass="search-box">

                <ice:selectInputText id="AutoCmpTxtFace"
                                     rows="6"
                                     width="300"
                                     value="#{searchBackBean.value}"
                                     valueChangeListener="#{searchControlBean.updateList}"
                                     listVar="achi"
                                     listValue="#{searchControlBean.achiMatchPossibilities}">
                    <!-- facet is used to define area used in popup -->



                    <f:facet name="selectInputText">

                        <ice:panelGrid columns="1"
                                       columnClasses="cityCol,stateCol,zipCol">
                            <ice:outputText id="AutoCmpSt" value="#{achi.title_sv}"/>
                        </ice:panelGrid>
                    </f:facet>



                </ice:selectInputText>
                <hr/>

                <ice:panelGroup style="z-index:10; width:400px; height: 30px; background-color:silver; cursor:move;"
                                draggable="true" dragListener="#{newsControlBean.dragListener}"
                                dragOptions="dragGhost"
                                dragMask="dragging"
                                dropMask="dragging,hover_start,hover_end"
                                dragValue="#{searchBackBean.achi}">
                    <h:graphicImage width="20" height="20" url="achi_img/#{searchBackBean.achi.image}"/>
                    <h:outputText value="#{searchBackBean.achi.title_sv}"/>
                    <h:outputText value="#{searchBackBean.achi.category}"/>
                    <h:outputText value="#{searchBackBean.achi.image}"/>
                </ice:panelGroup>



                <hr/>
                <!-- Drop Target 1 -->
                <!-- style="margin:10px; padding:10px; width:100px; height:100px; background-color:orange; color:white; float: left;" -->

                <c:forEach var="achi" items="${newsControlBean.targets}">

                    <ice:panelGroup dropValue="#{achi.key}" 
                                    style="margin:10px; padding:10px; width:100px; height:100px; background-color:orange; color:white; float: left;" 
                                    dropTarget="true"
                                    draggable="true" dragListener="#{newsControlBean.dragListener2}"
                                    dragOptions="dragGhost"
                                    dragMask="dragging"
                                    dropMask="dragging,hover_start,hover_end"
                                    dragValue="#{achi.value}">

                        <ice:graphicImage visible="true"
                                          width="100px"
                                          height="75px"
                                          url="achi_img/#{achi.value.image}"
                                          alt="#{achi.value.title_sv}"/>
                        #{achi.value}
                    </ice:panelGroup>
                </c:forEach>

            </ice:panelGroup>

            <ice:panelGroup styleClass="clearer"/>

        </h:form>

    </ui:define>

</ui:composition>